<template>
<el-dialog :visible.sync="visible" title="" :close-on-click-modal="false" :close-on-press-escape="false" width="50%" top="100px">
    <div class="dialogInner">
        <div class="personInfo">
            <span>{{ dataForm.guestName }}</span>
            <span>{{ dataForm.guestPhone }}</span>
            <!-- <span :style="{ background: roomStatusColor[dataForm.status] }">
                <template v-if="dataForm.status == 0"> 待支付 </template>
                <template v-if="dataForm.status == 1"> 已支付 </template>
                <template v-if="dataForm.status == -1"> 已取消 </template>
                <template v-if="dataForm.status == -2"> 退款中 </template>
                <template v-if="dataForm.status == -3"> 已退款 </template>
                <template v-if="dataForm.status == 3"> 已完成 </template>
            </span> -->
        </div>
        <el-collapse v-model="activeNames" @change="handleChange" :border="false">
            <el-collapse-item title="订单信息" name="1">
                <template slot="title">
                    <p style="font-weight: 600; font-size: 18px">订单信息</p>
                </template>

            </el-collapse-item>
        </el-collapse>
        <div class="moneyInfo">
            <span>订单号:{{ dataForm.orderCode }}</span>
            <span>实付金额:{{ dataForm.realityPay }}</span>
            <span>还需收款:{{parseFloat(dataForm.orderAmount) - parseFloat(dataForm.realityPay)}}</span>
        </div>
        <div style="padding: 20px 0; margin-bottom: 60px">
            <p style="margin-bottom:10px" v-if="dataForm.status == -1"> 取消原因：{{ dataForm.refundReason }}</p>
            <p> 备注：{{ dataForm.remarks }}</p>
        </div>
        <div class=" orderInfo">
                <span>订单金额:{{ dataForm.orderAmount }}</span>
                <span>创建时间:{{ dataForm.orderTime }}</span>
                <!-- <span>办理员工:{{ dataForm.orderAmoun }}</span> -->
        </div>
    </div>
</el-dialog>
</template>

<script>
var that;
import AddOrUpdate from "../roomStatus/createOrder";
export default {
    data() {
        return {
            visible: false,
            payState: [{
                    val: 4,
                    label: '已取消'
                },
                 {
                    val: -2,
                    label: '待支付'
                },
                {
                    val: -1,
                    label: '待确定'
                },
                {
                    val: 1,
                    label: '已预订'
                },
                {
                    val: 2,
                    label: '已入住'
                },
                {
                    val: 3,
                    label: '已退房'
                },
                {
                    val:5,
                    label: '已退款'
                }
            ],
            roomStatusColor: {
                '0': "#f29130",
                '1': "#2d8cf0",
                '-1': "#969799",
                '-2': "#ed4014",
                '-3': "#969799",
                '3': "#2d8cf0",
            },
            activeNames: "1",
            dataForm: {
                id: "",
            },
        };
    },
    components: {
    },
    created() {
        that = this;
    },
    methods: {
        init() {
            this.visible = true;
            this.$nextTick(() => {
                // this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get(`/scenic/merchant/order/${this.dataForm.id}`)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
p {
    margin: 0;
}

.orderInfo {
    position: absolute;
    width: 100%;
    height: 40px;
    background: #f5f5f5;
    line-height: 40px;
    left: 0;
    display: flex;
    justify-content: space-around;
    bottom: 100px;
}

.moneyInfo {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    border: 1px solid #eee;
}



.personInfo {
    padding: 20px 30px 50px 120px;
    display: flex;
    align-items: center;

    span {
        &:nth-child(1) {
            font-size: 18px;
            margin-right: 50px;
        }

        &:nth-child(2) {
            font-size: 15px;
            flex: 1;
        }

        &:nth-child(3) {
            display: inline-block;
            color: #fff;
            padding: 5px 8px;
            font-size: 16px;
            border-radius: 5px;
            margin-left: 4px;
            min-width: 100px;
            border-radius: 20px;
            text-align: center;
            line-height: 30px;
        }
    }
}

</style>
